<template>
  <div class="header-search-wrap">
                        <form action="#">
                            <select class="custom-select">
                                <option selected="">All Categories</option>
                                <option>-- Grocery & Frozen</option>
                                <option>-- Fresh Fruits</option>
                                <option>-- Fresh Fish</option>
                                <option>-- Fresh Nuts</option>
                                <option>-- Fresh Meats</option>
                                <option>-- Bread & Bakery</option>
                                <option>-- Vegetable</option>
                                <option>-- Kids Food</option>
                                <option>-- Dried Fruits</option>
                                <option>-- Others Food</option>
                            </select>
                            <input type="text" v-model="commodityname" placeholder="请输入要搜索的商品" >
                            <button @click.prevent="search" :title="commodityname ? `点击搜索'${commodityname}''` : null"><i class="flaticon-loupe-1"></i></button>
                        </form>
                    </div>
</template>
 
<script>
 
import { mapGetters,mapActions,mapMutations,mapState } from 'vuex';
 
export default {
    components:{
 
              },
    data() {
          return {
            commodityname:null,
                routes:{
                    search:'/search'
                }
                 }
         },
         methods: {
            search(){
                this.$router.push({
                   name:'search',
                   params:{
                    commodityname:this.commodityname
                   }
                })
            }
         },
    computed:{

             },
    created() {

              },
    mounted() {

              },
    watch:{
        
          },

    beforeCreate(){

                  },
    beforeDestroy() {

                    },
    deactivated() {

                   },
}
</script>
<style>
</style>